<template>
  <div class="userPage">
    <div class="bgMask">
      <div class="bgTop bg_g"></div>
    </div>
    <div class="userContent">
      <van-sticky>
        <div class="userTop flex_r_sb_c tc_w bg_g">
          <span class="f_16 fw_700">我的预约</span>
          <div class="f_14" @click="goBookingRecord">
            <span>预约记录</span>
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
      </van-sticky>
      <div class="bookingList">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">
          <!-- <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList" @cancelBooking="cancelBooking" @checkDetails="checkDetails"></booking-card> -->
          <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card>
        </van-list>
      </div>
      <loading-data v-if="bookingList.length === 0 || loading" :listLength="bookingList.length" :isLoading="loading" :textType="1"></loading-data>
      <float-btn v-if="isManager" class="floatBtn" :handleNum="handleNum"></float-btn>
    </div>

    <van-tabbar v-model="active" @change="onTabbarChange" style="z-index: 999">
      <van-tabbar-item name="booking">
        <span class="tc_9">誉约</span>
        <template #icon="props">
          <img :src="props.active ? homeIcon.active : homeIcon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="user" icon="search">
        <span class="tc_g">我的</span>
        <template #icon="props">
          <img :src="props.active ? userIcon.active : userIcon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import bookingCard from '@/components/bookingCard.vue'
import loadingData from '@/components/loadingData.vue'
import floatBtn from '@/components/floatBtn.vue'
import user from '@/api/user'
import audit from '@/api/audit'
export default {
  components: {
    bookingCard,
    loadingData,
    floatBtn
  },
  data() {
    return {
      active: 'user',
      homeIcon: {
        active: require('@/assets/home_active.png'),
        inactive: require('@/assets/home.png')
      },
      userIcon: {
        active: require('@/assets/user_active.png'),
        inactive: require('@/assets/user.png')
      },
      bookingList: [
        // {
        //   id: '1',
        //   name: '总部-3D试衣间总部-3D试衣间总部-3D试衣间',
        //   imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
        //   time: '2020-11-09 15:00-18:00',
        //   address: '东方明珠花苑明福楼千誉二楼',
        //   serviceItem: '参观、洽谈',
        //   peopleNum: '6人',
        //   other: '需要会议室、需要茶室',
        //   state: 'booking',
        //   bookingState: 'audit'
        // },
        // {
        //   id: '2',
        //   name: '5G商学院',
        //   imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
        //   time: '2020-11-10 15:00-18:00',
        //   address: '东方明珠花苑明居楼广州市千誉贸易有限公司5G商学院',
        //   serviceItem: '参观、洽谈、会议',
        //   peopleNum: '6人',
        //   other: '需要会议室、需要茶室',
        //   state: 'done',
        //   bookingState: ''
        // },
        // {
        //   id: '1',
        //   name: '总部-3D试衣间',
        //   imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
        //   time: '2020-11-09 15:00-18:00',
        //   address: '东方明珠花苑明福楼千誉二楼',
        //   serviceItem: '参观、洽谈',
        //   peopleNum: '6人',
        //   other: '需要会议室、需要茶室',
        //   state: 'cancel',
        //   bookingState: ''
        // },
        // {
        //   id: '2',
        //   name: '5G商学院',
        //   imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
        //   time: '2020-11-10 15:00-18:00',
        //   address: '东方明珠花苑明居楼广州市千誉贸易有限公司5G商学院',
        //   serviceItem: '参观、洽谈、会议',
        //   peopleNum: '6人',
        //   other: '需要会议室、需要茶室',
        //   state: 'booking',
        //   bookingState: 'approved'
        // }
      ],
      loading: false,
      finished: false,
      page: 1,
      lastPage: 0,
      isManager: false,
      handleNum: 99
    }
  },
  methods: {
    onTabbarChange(index) {
      if (index === 'booking') {
        this.$router.push({
          path: '/booking'
        })
      }
    },
    onBooking(data) {
      this.$router.push({
        path: `/bookingDetails/${data.id}`
      })
    },
    onLoad() {
      this.getListData(true)
    },
    reloadList() {
      this.page = 1
      this.getListData()
    },
    getListData(isNextPage) {
      if (!this.$tools.isNullOrEmpty(isNextPage)) {
        ++this.page
      }
      this.loading = true
      user.getBookingList({type: 'going', page: this.page}).then((res) => {
        this.lastPage = res.data.last_page
        res.data.data.forEach((item, index) => {
          item.bookingTime = item.date_text + ' ' + item.starttime_text + '-' + item.endtime_text
          item.bookingAdd = item.city + item.address
        })
        if (!this.$tools.isNullOrEmpty(isNextPage)) {
          this.bookingList = this.bookingList.concat(res.data.data)
        } else {
          this.bookingList = res.data.data
        }

        this.loading = false
        if (res.data.current_page === res.data.last_page || res.data.last_page === 0) {
          this.finished = true
        }
      })
    },
    getAudit() {
      audit.getAuditData().then((res) => {
        if (res.code === 0) {
          // 无审核权限
          this.isManager = false
        } else if (res.code === 1) {
          this.isManager = true
          this.handleNum = res.data
        }
      })
    },
    checkDetails(id) {
      this.$router.push({
        path: `/bookingInfo/${id}`
      })
    },
    goBookingRecord() {
      this.$router.push({
        path: '/bookingRecord'
      })
    }
  },
  mounted() {
    this.getListData()
    this.getAudit()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.userPage {
  position: relative;
}
.bgMask {
  .bgTop {
    position: fixed;
    width: 100%;
    height: 16rem;
  }
}
.userContent {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  // padding: 0rem 1.4rem;
  box-sizing: border-box;
  margin-bottom: 6rem;
  z-index: 999;
  .userTop {
    padding: 0rem 1.4rem;
    box-sizing: border-box;
    height: 5.5rem;
  }
  .bookingList {
    padding: 0rem 1.4rem;
    box-sizing: border-box;
  }
}
.floatBtn {
  position: fixed;
  right: 1.4rem;
  bottom: 7rem;
}
</style>
